<template>
  <section>
    <div class="container">
      <div class="article-inner">
        <span style="border-bottom: 3px blue solid;font-size: 20px;padding-bottom: 5px">评论</span>
        <div class="d-block clearfix" style="border-top: 2px #797979 solid;margin-bottom: 10px">
          <!--评论内容-->
          <div class="comment-top" id="comment-top" style="margin-top: 30px">
            <textarea class="comment-top-input border rounded border-primary" name="" id="commentContent"
                      placeholder="请在此处发表评论" @click="textareaFocus()"></textarea>
          </div>
          <div class="commentBtn float-right">
            <button class="comment-submit btn btn-primary" @click="addComment()">发表评论</button>
          </div>
        </div>

        <!--评论底部-->
        <span style="font-size: 20px">
          共
          {{count}}
          条评论
        </span>
        <div class="comment-bottom" style="border-top: 2px #797979 solid">
          <div class="all-comments" style="margin-top: 30px">
            <!--每一条评论的相关信息-->
            <div class="visitorComment row" v-for="(item, index) in comments">
              <!--评论用户的头像-->
              <div class="visitorCommentImg col-lg-1 d-none d-lg-block">
                <img src="http://iph.href.lu/64x64" class="rounded-circle" alt="">
              </div>

              <div class="visitorComment-content col-lg-10 d-block">
                <div class="visitorInfo">
                  <span class="visitorName changeHoverColor"> {{item.CommentContent.userName}}</span>
                  <span class="visitorFloor">#{{index + 1}}楼</span>
                  <span class="visitorPublishDate float-right">  {{item.CommentContent.commentCreate}} </span>
                </div>
                <div class="visitorSay"> {{item.CommentContent.content}}</div>
                <div class="tool-group">
                  <button @click="addCommentLike()">
                    <i class="comment-like zi zi_digg xiao"></i>
                    <span class="changeHoverColor"> {{item.CommentContent.commentLikes}}  人赞</span>
                  </button>
                  <button @click="replyComment(item.CommentContent.commentContentId, item.CommentContent.userName)">
                    <i class="comment-replay zi zi_comments xiao"></i> <span class="changeHoverColor">回复</span>
                  </button>
                </div>
                <!--评论的回复信息-->
<!--                {{item["CommentReply"]}}-->
                <div>
                  <div class="sub-comment" style="margin-top: 10px" v-for="(ite,index) in item['CommentReply']" v-if="item['CommentReply']">
                    <div class="sub-comment-list">
                      <div class="visitorReplies">
                        <div class="visitorReply">
                          <div class="visitorReplyWords">
                            <a href="#">{{ite.commentReplyName}}</a>
                            ：
                            <a href="#">@{{ite.commentReplyUserName}}</a>
                            &nbsp;&nbsp;时间:{{ite.commentCreate}}
                          </div>
                        </div>
                        <div class="visitorReplyTime">
                          <span class="visitorReplyTimeTime">{{ite.commentReplyContent}}</span>
                          <button>
                            <i class="zi zi_comments xiao"></i><span class="changeHoverColor">回复</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <!--分页-->
            <Page v-if="total!=''" :total="total" @pagechange="pageChange"></Page>
          </div>
          <!-- <div style="border-top: 1px black solid;margin-bottom: 50px">
            <div style="width: 90%;margin: 0 auto;overflow: hidden;margin-top: 15px">
              <div style="width: 45%;float: left;">
                <div>
                  <span>上一章</span>
                </div>
                <div style="width: 90%;border: 15px #CCCCCC solid;height: 200px">
                  <img src="static/img/default4.jpg" style="position:absolute;width: 380px;height: 180px;z-index: -1">
                  <div style="margin-top: 30px">
                    <h4 style="font-weight: 600">花儿为什么那样红</h4>
                    <a href="##" style="font-size: 20px;margin-right: 10px">Java大师</a><span>2020-05-14</span><br>
                    <div class="article-tag-icon d-inline-block text-center" style="margin-left: 10px">Java</div>
                  </div>
                </div>
              </div>
              <div style="width: 45%;float: right;">
                <div style="overflow: hidden;">
                  <span style="float: right">下一章</span>
                </div>
                <div style="width: 90%;border: 15px #CCCCCC solid;height: 200px;float: right">
                  <img src="static/img/default3.jpg" style="position:absolute;width: 380px;height: 180px;z-index: -1">
                  <div style="margin-top: 30px">
                    <h4 style="font-weight: 600">花儿为什么那样红</h4>
                    <a href="##" style="font-size: 20px;margin-right: 10px">Java大师</a><span>2020-05-14</span><br>
                    <div class="article-tag-icon d-inline-block text-center" style="margin-left: 10px">Java</div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>


  </section>
</template>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script>

  import Page from "../public/Page"

  export default {
    components: {
      Page
    },
    name: "Comment",
    data() {
      return {
        comments: [],
        total: '', // 所有数据
        id: 1, // 文章id
        uid: '', // 用户id
        uname: '', // 评论用户名称
        rid: null, // 评论被回复id
        count: '', // 评论总数
      }
    },
    methods: {
      textareaFocus() {
        if (this.uid == null) {
          alert("请先登录");
          return;
        }
      },
      // 保存评论内容
      addComment() {
        if (this.uid == null) {
          alert("请先登录");
          return;
        }

        let text = $('#commentContent').val();
        if (text.length <= 0) {
          alert("请填写评论内容");
          return;
        }
        ;

        if (this.rid == null) {
          $.ajax({
            type: "post",
            url: 'http://localhost:9000/article/addComment',
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
              content: text, // 评论内容
              articleId: this.id,
              userId: this.uid,
              commentLikes: 0,
              commentCreate: null,
              commentModified: null
            }),
            success: function (data) {
              $("#commentContent").val('');
              window.location.reload();
              this.rid = null;
            }
          })
        } else {
          $.ajax({
            type: "post",
            url: 'http://localhost:9000/article/addReplyComment',
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
              commentReplyContent: text, //回复评论内容
              commentReplyId: this.rid, // 被回复评论id
              commentReplyName: this.uname, // 被回复人的名称
              commentReplyUserId: this.uid,   // 主动回复人的id
              commentCreate: null,   // 回复时间
            }),
            success: function (data) {
              $("#commentContent").val('');
              console.log(data);
              window.location.reload();
              this.rid = null;
            }
          })
        }

      },
      pageChange(data) {
        this.axios.get("http://localhost:9000/article/findComment/" + this.id + '/' + data).then((resp) => {
          let comment = resp.data;
          this.comments = comment.data.list;
          this.total = parseInt(comment.data.pages);
        })
      },// 回复评论
      replyComment(userId2, name) {
        $("#commentContent").attr("placeholder", "@" + name).focus();
        this.rid = userId2;
        this.uname = name;
        alert(this.rid);
      },//点赞
      addCommentLike() {
        this.axios.get("http://localhost:9000/article/findComment/" + this.id + '/' + data).then((resp) => {
          let comment = resp.data;
          this.comments = comment.data.list;
          this.total = parseInt(comment.data.pages);
        })
      }
    },
    beforeMount: function () {
      this.id = this.$route.params.articleid;
      this.uid = window.sessionStorage.getItem('userId');
    },
    mounted: function () {
      this.axios.get('http://localhost:9000/article/findComment/' + this.id + "/" + '1').then((resp) => {
        let comment = resp.data;
        console.log(comment.data.list);
        this.comments = comment.data.list; // 评论数据
        this.total = parseInt(comment.data.pages); // 评论页数
        this.count = comment.data.total; // 评论总数
      })
    }
  }


</script>

<style scoped>
  .xiao {
    font-size: 20px;
  }

  .article-category {
    margin-left: 10px;
  }

  .article-tag {
    margin-left: 10px;
  }

  .article-author {
    margin-left: 10px;
  }

  .article-entry {
    padding-top: 10px;
    padding-bottom: 10px;
    word-break: break-all;
  }

  .changeHoverColor:hover {
    color: deepskyblue;
  }

  .article-category-link:hover {
    color: deepskyblue;
  }

  .article-footer div div {
    margin-right: 20px;
  }

  .article-reads {
    margin-top: 10px;
  }

  .comment-top {
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .comment-top-input {
    width: 80%;
    height: 100px;
    resize: none;
    word-break: break-all;
    margin: 0 50px;
  }

  /*评论提价按钮*/
  .comment-submit {
    margin-right: 30px;
  }

  /*所有评论*/
  /*.comment-bottom{
    margin-top: 50px;
  }*/
  .article-comment-top {
    margin-bottom: 30px;
  }

  .article-comment-word {
    font-size: 30px;
    /*border:3px solid #0f6674;*/
  }

  /*评论的细节*/
  .visitorComment {
    margin-top: 20px;
    /*border-bottom: 1px solid black;*/
  }

  .visitorComment-content {
    margin-left: 10px;
    /*border: 3px solid black;*/
  }

  .visitorInfo {
    margin-top: 10px;
    /*border: 3px solid red;*/
  }

  .visitorFloor {
    margin-left: 10px;
  }

  /*评论人头像*/
  .visitorCommentImg {
    width: 64px;
    height: 64px;
  }

  /*评论内容*/
  /*.visitorSay{
    margin-top: 10px;
  }*/

  .tool-group {
    /*margin-top: 10px;*/
    margin-bottom: 10px;
  }

  .tool-group a {
    margin-right: 10px;
  }

  a {
    color: black;
  }

  .sub-comment {
    border-left: 3px solid grey;
  }

  a {
    text-decoration: none;
  }


  /*文章内容*/
  .article-content {
    border: 3px solid gray;
    border-radius: 3px;
  }

  /*标签*/
  .article-tag {
    font-size: 20px;
  }

  /*标签图标*/
  .article-tag-icon {
    background: deepskyblue;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 7px;
    color: white;
  }

  .comment-title {
    font-size: 18px;
  }
</style>
